<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<section>
	<h3 class="font-thin m-b">Video List</h3>
	<div class="row row-sm">
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m40.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Tempered Song</a>
					<a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Miaow</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m41.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Morbi id
						neque quam</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Phasellus</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m42.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Aliquam
						sollicitudin venenatis ipsum</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Malesuada</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m43.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Citudin
						venenatis ipsum ac</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Volutpat</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m44.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Vestibulum
						ullamcorper sodales nisi</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Mauris Qiaos</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m40.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Mauris
						convallis mauris at</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Neque</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m45.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Sodales nisi
						nec condimentum</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Augue</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m44.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Nisi nec
						condimentum</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Miaow</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m43.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Phasellus at
						ultricies nequ</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Volutpat</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m42.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Quis
						malesuada augue</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Feugiat</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m41.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Ipsum ac
						feugiat</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Quam AC</a>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-sm-4 col-md-3">
			<div class="item">
				<div class="pos-rlt">
					<div class="item-overlay opacity r r-2x bg-black">
						<div class="center text-center m-t-n">
							<a href="video-detail.html"><i class="fa fa-play-circle i-2x"></i></a>
						</div>
					</div>
					<a href="video-detail.html"><img src="images/m40.jpg" alt=""
						class="r r-2x img-full"></a>
				</div>
				<div class="padder-v">
					<a href="video-detail.html" class="text-ellipsis">Ullamcorper
						sodales nisi nec condimentu</a> <a href="video-detail.html"
						class="text-ellipsis text-xs text-muted">Convallis</a>
				</div>
			</div>
		</div>
	</div>
	<ul class="pagination pagination">
		<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
	</ul>
</section>
